<html>
<link href="leaflet/leaflet.css" rel="stylesheet">
<script src="leaflet/leaflet.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<link rel="stylesheet" href="leaflet-beautify-marker-icon.css">
<script src="leaflet-beautify-marker-icon.js"></script>
<script>
    window.onload = function () {
        var map = L.map('map').setView([33.738045, 73.084488], 9);

        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        L.marker([33.89093747081252, 72.7734375], { icon: L.BeautifyIcon.icon(), draggable: true }).addTo(map).bindPopup("I'm Beautify");
        var options = {
            html: '<i class="material-icons">face</i>',
            iconAnchor: [11, 10]
        };
        L.marker([33.89093747081252, 72.9107666015625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'plane'
                , borderColor: '#8D208B'
                , textColor: '#8D208B'
                , backgroundColor: 'transparent'
        };
        L.marker([33.89093747081252, 73.0426025390625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'ambulance'
               , borderColor: 'Red'
               , textColor: 'Red'
               , innerIconStyle: 'font-size:11px;padding-top:1px;'
        };
        L.marker([33.89093747081252, 73.17718505859375], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'taxi'
                , borderColor: 'red'
                , textColor: 'Red'
                , backgroundColor: '#FFF607'
                , innerIconStyle: 'font-size:9px;padding-top:1px;'
        };
        L.marker([33.89093747081252, 73.32000732421875], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            isAlphaNumericIcon: true
                , borderColor: '#00ABDC'
                , textColor: '#00ABDC'
                , innerIconStyle: 'margin-top:0;'
        };
        L.marker([33.89093747081252, 73.49029541015625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'spinner'
                , spin: 'true'
                , borderColor: '#8A90B4'
                , textColor: 'white'
                , backgroundColor: '#8A90B4'
        };
        L.marker([33.89093747081252, 73.65509033203125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");






        options = {
            icon: 'leaf'
                , iconShape: 'marker'
        };
        L.marker([33.73, 72.77069091796875], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("popup").bindPopup("I'm Beautify");

        options = {
            icon: 'bus'
                , iconShape: 'marker'
                , borderColor: '#b3334f'
                , textColor: '#b3334f'
        };
        L.marker([33.73, 72.90802001953125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'plane'
               , iconShape: 'marker'
               , borderColor: '#8D208B'
               , textColor: '#8D208B'
               , backgroundColor: 'transparent'
        };
        L.marker([33.73, 73.037109375], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'ambulance'
                , iconShape: 'marker'
                , borderColor: 'Red'
                , textColor: 'Red'
                , innerIconStyle: 'font-size:11px;padding-top:1px;'
        };
        L.marker([33.73, 73.17718505859375], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'taxi'
                , iconShape: 'marker'
                , borderColor: 'red'
                , textColor: 'Red'
                , backgroundColor: '#FFF607'
                , innerIconStyle: 'font-size:9px;padding-top:1px;'
        };
        L.marker([33.73, 73.3172607421875], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            isAlphaNumericIcon: true
                , text: 10
                , iconShape: 'marker'
                , borderColor: '#00ABDC'
                , textColor: '#00ABDC'
        };
        L.marker([33.73, 73.487548828125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            icon: 'refresh'
               , iconShape: 'marker'
               , spin: 'true'
               , borderColor: '#8A90B4'
               , textColor: '#8A90B4'
        };
        L.marker([33.73, 73.65509033203125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
                , borderWidth: 5
        };

        L.marker([33.66, 72.76519775390625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("popup").bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: '#b3334f'
        };

        L.marker([33.66, 72.9052734375], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: '#8D208B'
        };

        L.marker([33.66, 73.037109375], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: 'red'
        };

        L.marker([33.66, 73.17993164062499], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: '#FFF607'
        };

        L.marker([33.66, 73.32550048828125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: '#00ABDC'
        };

        L.marker([33.66, 73.4930419921875], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'doughnut'
               , borderWidth: 5
               , borderColor: '#8A90B4'
        };

        L.marker([33.66, 73.66333007812499], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");








        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
        };

        L.marker([33.55, 72.76519775390625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#b3334f'
        };

        L.marker([33.55, 72.90802001953125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#8D208B'
        };

        L.marker([33.55, 73.03436279296875], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: 'red'
        };

        L.marker([33.55, 73.17993164062499], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#FFF607'
        };

        L.marker([33.55, 73.32550048828125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#00ABDC'
        };

        L.marker([33.55, 73.49029541015625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'circle-dot'
               , borderWidth: 5
               , borderColor: '#8A90B4'
        };

        L.marker([33.55, 73.66333007812499], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");





        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
        };

        L.marker([33.45, 72.76519775390625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: '#b3334f'
        };

        L.marker([33.45, 72.90802001953125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: '#8D208B'
        };

        L.marker([33.45, 73.03985595703124], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: 'red'
        };

        L.marker([33.45, 73.18267822265625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: '#FFF607'
        };

        L.marker([33.45, 73.32550048828125], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: '#00ABDC'
        };

        L.marker([33.45, 73.49029541015625], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");

        options = {
            iconShape: 'rectangle-dot'
               , borderWidth: 5
               , borderColor: '#8A90B4'
        };

        L.marker([33.45, 73.66333007812499], { icon: L.BeautifyIcon.icon(options), draggable: true }).addTo(map).bindPopup("I'm Beautify");
    }
</script>
<body>
    Beautify Marker
    <div id="map" style="height:100%; width:100%;"></div>
</body>
</html>
